<template>
    <page-main title="毕业跟踪" title-icon="dashboard" class="graduate">
        <div class="graduate-header">
            <div class="graduate-header-select">
                <!--                <div style="margin-right: 15px;">-->
                <!--                    专业：-->
                <!--                    <el-select v-model="value" placeholder="请选择" size="small">-->
                <!--                        <el-option-->
                <!--                            v-for="item in options"-->
                <!--                            :key="item.value"-->
                <!--                            :label="item.label"-->
                <!--                            :value="item.value"-->
                <!--                        />-->
                <!--                    </el-select>-->
                <!--                </div>-->
                <!--                <div>-->
                <!--                    班级：-->
                <!--                    <el-select v-model="value" placeholder="请选择" size="small">-->
                <!--                        <el-option-->
                <!--                            v-for="item in options"-->
                <!--                            :key="item.value"-->
                <!--                            :label="item.label"-->
                <!--                            :value="item.value"-->
                <!--                        />-->
                <!--                    </el-select>-->
                <!--                </div>-->
                <el-row :gutter="20">
                    <el-col :md="8">
                        专业：
                        <el-select v-model="value" placeholder="请选择" size="small">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-col>
                    <el-col :md="8">
                        班级：
                        <el-select v-model="value" placeholder="请选择" size="small">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-col>
                    <el-col :md="8">
                        <el-input clearable placeholder="请输入学员姓名|班级|就业单位" size="small" style="width: 90%;"/>
                    </el-col>
                </el-row>
            </div>
            <div class="graduate-header-search">
                <button-panel size="" icon="el-icon-search" title="搜索"></button-panel>
                <!--                <el-button size="mini" icon="el-icon-search" style="margin-left: 8px;" type="primary">搜索</el-button>-->
            </div>
        </div>
        <div class="graduate-table">
            <table-pane :table-title-data="tableTitleData" :table-data="tableData"
                        :config-flag="{needPage:true}"
                        :pager="listPagination"
                        @handleSizeChange="handleSizeChange"
                        @handleCurrentChange="handleCurrentChange"
            >
                <template slot="actions" slot-scope="props">
                    <el-button type="primary" size="mini" @click="getDetail(props.scope.row)"> 查看内容</el-button>
                </template>
            </table-pane>
        </div>
    </page-main>
</template>

<script>
import PageMain from '@/components/PageMain'
import TablePane from '@/components/tablePanel/table'
import ButtonPanel from '@/components/buttonPanel/buttonPanel'

export default {
    name: 'Index',
    components: {ButtonPanel, TablePane, PageMain},
    data() {
        return {
            options: [
                {
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
            value: '',
            tableTitleData: [
                {
                    label: '学生姓名',
                    value: 'name'
                },
                {
                    label: '班级',
                    value: 'class'
                },
                {
                    label: '就业单位',
                    value: 'job'
                },
                {
                    label: '反馈情况',
                    value: 'detail'
                },
                {
                    label: '操作',
                    value: 'action',
                    slotName: 'actions'
                }
            ],
            tableData: [],
            listPagination: {
                current: 1,
                size: 10,
                totalCount: 0
            } // 分页
        }
    },
    mounted() {
        this.getGraduateData()
    },
    methods: {
        getGraduateData() {
            const {current, size} = this.listPagination
            this.$api.get('/graduateTrack/list', {
                params: {
                    pagesize: size,
                    pageIndex: current
                }
            }).then(res => {
                const {total, list} = res
                this.listPagination.totalCount = total
                this.tableData = list
            })
        },
        handleSizeChange(val) {
            this.listPagination.size = val
            this.getGraduateData()
        },
        handleCurrentChange(val) {
            this.listPagination.current = val
            this.getGraduateData()
        },
        getDetail(val) {
            console.log(val)
            this.$router.push('/graduateTrack/index/detail')
        }
    }
}
</script>

<style scoped>
.graduate-table,
.graduate-header-search {
    margin-top: 15px;
}
</style>
